<!DOCTYPE html>
<html style="width: 100%;height: 100%;">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>
        用户申请的详情页展示
    </title>
    <style>
        td{border:solid #add9c0; border-width:0px 1px 1px 0px; text-align: center;
            font-size: small;}
        th{border:solid #add9c0; border-width:0px 1px 1px 0px;}
        table{border:1px solid   #add9c0;  border-collapse: collapse;}
        /* 宽度顺序应该是  上下右左    border-collapse: collapse;代表边框重叠的时候要合并 */
        input{
            width: 15%;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;margin-left: 0px;margin-top: 0px;">
<script>

    window.onload=function(){
        var tbody=document.getElementById("tbody");
        var button_no=document.getElementById("button_no");
        var button_fail=document.getElementById("button_fail");
        var reason=document.getElementById("reason");
        var button_success=document.getElementById("button_success");
        var xmlhttp;

        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var responseText=xmlhttp.responseText;
                //alert(responseText);
                sessionStorage.setItem("app",responseText);
                //window.eval("var approvals="+responseText);
                //window.eval("var approvals="+responseText);

            }
        }
        var stuffText=sessionStorage.getItem("stuff");
        window.eval("var stuff="+stuffText);
        xmlhttp.open("POST","/approvalProcess/approvalDetail",true);
        xmlhttp.send(stuff.staffno);
        var showNo=function (){
            //alert(1);
            tbody.innerHTML="";
            button_no.style="background-color: aqua;";
            button_fail.style="background-color: none;";
            button_success.style="background-color: none;";
            reason.style="display: none;";
            var s=approvalRecords.approvalRecordList;

            var body="";
            for(var approvalRecord in s ){
                if (s[approvalRecord].finished=="未审批"){
                   body+="<tr>"+
                        "<td>"+ s[approvalRecord].recordNo+"</td>"+
                        "<td>"+ s[approvalRecord].stuffName+"</td>"+
                        "<td>"+ s[approvalRecord].recordName+"</td>"+
                        "<td>"+ s[approvalRecord].time+"</td>"+
                        "<td>"+ s[approvalRecord].finished+"</td>"+
                        "<td>"+ s[approvalRecord].recordOpinin+"</td>"
                        +"</tr>";
                }else {
                    continue;
                }
            }
            tbody.innerHTML=body;
        }
        var showFail=function (){
            tbody.innerHTML="";
            //alert("bohui");
            var s=approvalRecords.approvalRecordList;
            button_fail.style="background-color: aqua;";
            button_no.style="background-color: none;";
            button_success.style="background-color: none;";
            reason.style="display: table-cell;";
            reason.innerText="驳回原因"
            var body="";
            for(var approvalRecord in s ){

                if (s[approvalRecord].finished=="审批没通过"){
                    body+="<tr>"+
                        "<td>"+ s[approvalRecord].recordNo+"</td>"+
                        "<td>"+ s[approvalRecord].stuffName+"</td>"+
                        "<td>"+ s[approvalRecord].recordName+"</td>"+
                        "<td>"+ s[approvalRecord].time+"</td>"+
                        "<td>"+ s[approvalRecord].finished+"</td>"+
                        "<td>"+ s[approvalRecord].recordOpinin+"</td>"+
                        "<td>"+ s[approvalRecord].recordOpinion1+"</td>"
                        +"</tr>";
                }else {
                    continue;
                }
            }
            tbody.innerHTML=body;
        }
        var showSuccess=function (){
           //alert("sunccess")
            tbody.innerText="dsakjdhsj"
            var s=approvalRecords.approvalRecordList;
            button_success.style="background-color: aqua;";
            button_fail.style="background-color: none;";
            button_no.style="background-color: none;";
            reason.style="display: table-cell;";
            reason.innerText="审批意见";
            var body="";
            for(var approvalRecord in s ){
               //alert(s[approvalRecord].finished) ;
                if (s[approvalRecord].finished=="审批通过"){
                    body+="<tr>"+
                        "<td>"+ s[approvalRecord].recordNo+"</td>"+
                        "<td>"+ s[approvalRecord].stuffName+"</td>"+
                        "<td>"+ s[approvalRecord].recordName+"</td>"+
                        "<td>"+ s[approvalRecord].time+"</td>"+
                        "<td>"+ s[approvalRecord].finished+"</td>"+
                        "<td>"+ s[approvalRecord].recordOpinin+"</td>"+
                        "<td>"+ s[approvalRecord].recordOpinion1+"</td>"
                        +"</tr>";
                }else {
                    continue;
                }
            }
            tbody.innerHTML=body;
        }
        window.eval("var approvalRecords="+sessionStorage.getItem("app"));

        //alert(approvalRecords.num)
        showNo();
        button_no.onclick=function (){
            showNo();
        }
        button_fail.onclick=function (){
            showFail();
        }
        button_success.onclick=function (){

            showSuccess();
        }













        /*  以上是标准的ajax写法，ajax就是异步获取数据，可以不用刷新页面就与
                服务器交互
                第一步：获取xmlhttp对象   对于IE7之前的版本  需要用ActiveObject("Microsoft.XMLHTTP")获取
                        对于其他的浏览器  直接window.xmlHttp获取就行了，前面的判断语句就是用来获取xmlHttp对象的
                第二步：open方法   第一个参数：请求方式
                                    第二个参数  请求地址url
                                    第三个参数 true 就是是否异步访问 false是同步访问，就是请求不被响应，send就会阻塞
                                    具体请看https://www.cnblogs.com/xiaocaiyuxiaoniao/p/8323821.html
                第三步：send  就是放在请求体里的东西，发送请求。post方式，参数才需要，因为get方式参数直接放在url中
                                send的参数，不能在服务器向form的参数那样访问，而是被放在了request的InputStream中
                                需要获取InputStream进行访问
                第四步：onreadystatechange在这个事件中写一些处理命令


        */
    }
</script>

<div  style="width: 90%; margin-left: 5%;"> <input type="button"  id="button_no" value="未审批">
    <input type="button" id="button_fail" value="驳回">
    <input type="button"  id="button_success" value="审批通过">

</div>
<table align="center" style="width: 90%;">
    <thead>
    <tr>
        <th>申请编号</th>
        <th>申请人</th>
        <th>申请名称</th>
        <th>申请时间</th>
        <th>是否通过</th>
        <th>申请详情</th>
        <th style="display: none;" id="reason">驳回原因</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>
</body>
</html>